<template>
  <div>
    <van-nav-bar title="配套产品" />
    <van-grid square :column-num="2" :gutter="10" :padding="10">
      <van-grid-item v-for="item in accessoriesList" :key="item.id">
        <van-card
          :price="item.price"
          :title="item.name"
          @click="showDetail(item)"
        >
          <template #thumb>
            <img src="/static/2.png" style="width: 100px; height: 100px;" /> <!-- 使用模板插槽并设置样式 -->
          </template>
          <template #desc>
            <div class="card-desc">{{ item.description }}</div>
          </template>
          <template #footer>
            <van-button size="small" type="danger" @click.stop="addToCart(item)">加入购物车</van-button>
          </template>
        </van-card>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { showDialog, showToast } from 'vant'
import { useCartStore } from '../stores/cart.js'

const cartStore = useCartStore()

const accessoriesList = ref([
  {
    id: 1,
    name: '擦镜纸',
    price: '9.90',
    description: '专业眼镜清洁纸，便携装',
    image: '/static/2.png' // 原代码未变
  },
  {
    id: 2,
    name: '蒸汽眼罩',
    price: '29.90',
    description: '缓解眼疲劳，改善睡眠',
    // 修改为指定图片
    image: '/static/2.png'
  },
  {
    id: 3,
    name: '防滑扣',
    price: '19.90',
    description: '防止眼镜滑落，舒适佩戴',
    // 修改为指定图片
    image: '/static/2.png'
  },
  {
    id: 4,
    name: '遮盖眼贴',
    price: '39.90',
    description: '弱视训练专用眼贴',
    // 修改为指定图片
    image: '/static/2.png'
  }
])

const showDetail = (item) => {
  showDialog({
    title: item.name,
    message: `价格：${item.price}\n描述：${item.description}`,
    confirmButtonText: '确定'
  })
}

const addToCart = (item) => {
  cartStore.addToCart(item)
  showToast('已加入购物车')
}
</script>

<style scoped>
.accessories-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}
.card-desc {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>